<template>
<view class="page__bd">
	<custom-navbar bgColor="bg-white shadow" :isBack="false">
		<block slot="content">商品分类</block>
	</custom-navbar>
	<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
		<view class="daui-item" :class="index==TabCur?'text-primary current':''" v-for="(item,index) in categoryList" :key="index" @click="tabSelect" :data-index="index" :data-cid="item.id">
			{{item.name}}
		</view>
	</scroll-view>
	<view class="daui-card bui-wapcustom">
		<view v-if="classify_exhibition_mode == 1">
			<block v-for="(item, index) in productList" :key="index">
				<view class="daui-media daui-media_appmsg daui-media_product bg-white" hover-class="hover" :hover-start-time="150" @tap="openProductDetail(item.pid)">
					<view class="daui-media__hd">
						<image :src="item.picurl_show" mode="scaleToFill" class="daui-media__thumb"></image>
					</view>
					<view class="daui-media__bd">
						<view class="daui-media__prodtitle">{{item.name}}</view>
						<view class="daui-media__desc">{{item.subtitle}}</view>
						<view class="daui-media__tag" v-if="item.attrtag_num > 0">
							<view v-for="(itemTag, indexTag) in item.attrtag" class="daui-badge daui-badge-sm" :class="itemTag.color">
								{{itemTag.name}}
							</view>
						</view>
						<view class="daui-flex bui-brand">
							<view class="daui-flex__item">
								品牌：{{item.brand_name}}
							</view>
							<view class="daui-flex__item">
								产地：{{item.originplace}}
							</view>
						</view>
						<view class="flex justify-between align-end margin-top-xs">
							<view class="flex align-center flex-sub" v-if="item2.is_visible">
								<text class="text-price text-red text-lg">{{item2.real_price}}</text>
							</view>
							<view class="flex align-center flex-sub" v-else>
								<view class="text-red text-sm flex-sub">{{item2.real_price}}</view>
							</view>
							<view class="padding-left-xl text-right">
								<text class="iconfontzz icon-gouwuche text-red text-xxl"></text>
							</view>
						</view>
						<view class="margin-top-xs" v-if="0">
							<text class="text-price text-red text-xl">{{item.real_price}}</text>
							<text class="text-price text-gray text-del text-sm margin-left-xs">{{item.origin_price}}</text>
						</view>
						<view class="flex justify-between align-end" v-if="0">
							<view class="flex align-center flex-sub">
								<view class="text-gray text-sm flex-sub">已售{{item.sale_num}}</view>
							</view>
							<view class="padding-left-xl text-right">
								<button class="daui-btn bg-primary round shadow daui-btn_sm"><text class="icon-lightfill"> </text>抢购</button>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="daui-doublelist" v-else-if="classify_exhibition_mode == 2">
			<block v-for="(item, index) in productList" :key="index">
				<view class="daui-doublelist__item">
					<view class="daui-media daui-media_appmsg daui-media_product bg-white" hover-class="hover" :hover-start-time="150" @tap="openProductDetail(item.pid)">
						<view class="daui-media__bd">
							<view class="daui-media__banner">
								<image :src="item.picurl_show" mode="scaleToFill" :style="[{height:imgExhibitionDoubleHeight + 'px'}]"></image>
							</view>
							<view class="classify-card_content">
								<view class="daui-media__prodtitle">{{item.name}}</view>
								<view class="daui-flex bui-brand margin-top-xs">
									<view class="daui-flex__item">
										品牌：{{item.brand_name}}
									</view>
									<view class="daui-flex__item">
										产地：{{item.originplace}}
									</view>
								</view>
								<view class="flex justify-between align-end margin-top-xs">
									<view class="flex align-center flex-sub" v-if="item.is_visible">
										<text class="text-price text-red text-lg">{{item.real_price}}</text>
									</view>
									<view class="flex align-center flex-sub" v-else>
										<view class="text-red text-sm flex-sub">{{item.real_price}}</view>
									</view>
									<view class="padding-left-xl text-right">
										<text class="iconfontzz icon-gouwuche text-red text-xxl"></text>
									</view>
								</view>
								<view class="flex justify-between align-end margin-top-xs" v-if="0">
									<view class="flex align-center flex-sub">
										<text class="text-price text-red text-xl">{{item.real_price}}</text>
									</view>
									<view class="padding-left-xl text-right">
										<text class="text-price text-gray text-del text-lg margin-left-xs">{{item.origin_price}}</text>
									</view>
								</view>
								<view class="flex justify-between align-end" v-if="0">
									<view class="flex align-center flex-sub">
										<view class="text-gray text-sm flex-sub">已售{{item.sale_num}}</view>
									</view>
									<view class="padding-left-xl text-right">
										<button class="daui-btn bg-primary round shadow daui-btn_sm"><text class="icon-lightfill"> </text>抢购</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="waterfall-card" v-if="classify_exhibition_mode == 3">
			<view class="waterfall-card_item">
				<block v-for="(item, index) in productList" :key="index">
					<view class="daui-media daui-media_appmsg daui-media_product shadow bg-white" hover-class="hover" :hover-start-time="150" @tap="openProductDetail(item.pid)">
						<view class="daui-media__bd">
							<view class="daui-media__banner">
								<image :src="item.picurl_show" mode="widthFix"></image>
							</view>
							<view class="waterfall-card_content">
								<view class="daui-media__subtitle">{{item.name}}</view>
								<view class="margin-top-xs">
									<text class="text-price text-red text-xl">{{item.real_price}}</text>
									<text class="text-price text-gray text-del text-lg margin-left-xs">{{item.origin_price}}</text>
								</view>
								<view class="daui-media__desc">品牌：{{item.brand_name}}<text class="margin-left">产地：{{item.originplace}}</text></view>
								<view class="flex justify-between align-end">
									<view class="flex align-center flex-sub">
										<view class="text-gray text-sm flex-sub">已售{{item.sale_num}}</view>
									</view>
									<view class="padding-left-xl text-right">
										<button class="daui-btn bg-primary round shadow daui-btn_sm"><text class="icon-lightfill"> </text>抢购</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="waterfall-card_item">
				<block v-for="(item, index) in productList2" :key="index">
					<view class="daui-media daui-media_appmsg daui-media_product shadow bg-white" hover-class="hover" :hover-start-time="150" @tap="openProductDetail(item.pid)">
						<view class="daui-media__bd">
							<view class="daui-media__banner">
								<image :src="item.logo_show" mode="widthFix"></image>
							</view>
							<view class="waterfall-card_content">
								<view class="daui-media__subtitle">{{item.name}}</view>
								<view class="margin-top-xs">
									<text class="text-price text-red text-xl">{{item.real_price}}</text>
									<text class="text-price text-gray text-del text-lg margin-left-xs" v-if="item.origin_price != '0.00'">{{item.origin_price}}</text>
								</view>
								<view class="flex justify-between align-end">
									<view class="flex align-center flex-sub">
										<view class="text-gray text-sm flex-sub">已售{{item.sale_num}}</view>
									</view>
									<view class="padding-left-xl text-right">
										<button class="daui-btn bg-primary round shadow daui-btn_sm"><text class="icon-lightfill"> </text>抢购</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
	<view class="daui-load" :class="!loadding?'loading':'over'"><view class="daui-load-in"><view class="daui-nomore-text"></view></view></view>
	
	<view class="daui-tabbar-height margin-top"></view>
	
	<!--toast提示-->
	<daui-toast ref="toast"></daui-toast>
</view>
</template>

<script>
import danceuiTool from '../../utils/danceuiTool';
import http from "../../server/api-index.js";
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			classifyslideList: [],
			classify_swiper_ratio: 0,
			classifySwiperHeight: 0,
			defaultCategory: [{
				id: 0,
				name: '全部'
			}],
			TabCur: 0,
			list_param:{
				p:1
			},
			categoryList: [],
			nowPage:1,
			loadding: false,
			pullUpOn: true,
			classify_exhibition_mode: 0,
			classify_product_double_ratio: 0,
			imgExhibitionDoubleHeight: 0,
			productList: [],
			productList2: [],
		};
	},
	computed: {
		// style() {
		// 	var StatusBar = this.StatusBar;
		// 	var CustomBar = this.CustomBar;
		// 	var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
		// 	return style
		// },
	},
	onLoad() {
		this.getData();
	},
	onPullDownRefresh() {
		console.log('=====上拉刷新refresh');
		this.list_param = {...this.list_param, p:1}
		this.getData();
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 200);
	},
	async onReachBottom() {
		console.log('=====拉到底部onReachBottom');
		if (!this.pullUpOn) return;
		this.loadding = true;
		const token = uni.getStorageSync('token');
		let headers = {"Authorization":"Bearer "+token};
		this.list_param = {...this.list_param, p:++this.nowPage}
		let ret = await http.classify(this.$refs.toast, this.list_param, headers);
		var retData = ret.data;
		if(retData.productList){
			if(this.classify_exhibition_mode == 2){
				this.productList = [...this.productList,...retData.productList];
				this.productList2 = [...this.productList2,...retData.productList2];
			}else{
				this.productList = [...this.productList,...retData.productList];
			}
			this.nowPage = this.nowPage + 1;
		}else{
			this.loadding = false;
			this.pullUpOn = false;
		}
	},
	methods: {
		async getData(){ //请求并获取数据
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			let ret = await http.classify(this.$refs.toast, this.list_param, headers, 1);
			console.log('classify页面，获取到的数据：', ret);
			var retData = ret.data;
			this.classifyslideList = retData.classifyslideList;
			this.classifySwiperHeight = this.windowWidth * retData.classify_swiper_ratio; //图片高度计算
			//console.log('图片轮播高度classifySwiperHeight:'+this.classifySwiperHeight);
			this.categoryList =  [...this.defaultCategory,...retData.categoryList];
			this.classify_exhibition_mode = retData.classify_exhibition_mode;
			if(retData.classify_exhibition_mode == 1){
				this.productList = retData.productList;
			}else{
				this.productList = retData.productList;
				this.productList2 = retData.productList2;
			}
			this.imgExhibitionSingleHeight = this.windowWidth * retData.classify_product_double_ratio; //图片高度计算
			this.imgExhibitionDoubleHeight = (this.windowWidth-50) * retData.classify_product_double_ratio / 2; //图片高度计算
			console.log('窗口宽度:'+this.windowWidth+'图片轮播高度indexSwiperHeight:'+this.indexSwiperHeight+';单栏展示高度比:'+this.imgExhibitionSingleHeight+';并排展示高度:'+this.imgExhibitionDoubleHeight);
			this.loadding = true;
		},
		async tabSelect(e) {
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			this.TabCur = e.currentTarget.dataset.index;
			let cid = e.currentTarget.dataset.cid;
			//this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			var param = {
				cid: cid
			}
			let ret = await http.classify(this.$refs.toast, param, headers);
			console.log('classify页面，获取到的数据：', ret);
			var retData = ret.data;
			this.productList = retData.productList;
			this.productList2 = retData.productList2;
		},
		openProductDetail(pid) {
			uni.navigateTo({
				url: '/pages/product/productDetail?pid='+pid
			});
		},
		openShopDetail(shid) {
			uni.navigateTo({
				url: '/pages/shop/shopDetail?shid='+shid
			});
		}
	},
}
</script>

<style>
</style>
